import { useSetState } from "ahooks";
import { type FC, memo, useEffect } from "react";
import classNames from "classnames";
import contentStyle from "../index.module.scss";
import styles from "./index.module.scss";
import Layout from "./layout";
import Spacing from "./spacing";
import Colors from "./colors";
import Header from "./header";
import Confirm from "@/app/components/Confirm";
import { useCustomizationStore } from "@/src/providers/customization-store-provider";
import { applyTemplate, getTemplates } from "@/service";

interface IndexProps {
  onConfirm?: () => void;
  hasNoTemp?: boolean;
}
function Templates() {
  const { updateTemp, customization } = useCustomizationStore(
    (state) => state,
    (o, n) => {
      return o.customization.templateId === n.customization.templateId;
    }
  );
  const [state, setState] = useSetState({
    active: "top",
    templates: [],
  });
  useEffect(() => {
    getTemplates().then((res) => {
      if (res.code === 200) {
        setState({
          templates: res.data,
        });
      }
    });
  }, []);
  const updateTemplate = (templateId: string) => {
    return applyTemplate({
      id: customization.id,
      templateId,
    });
  };

  return (
    <div className={classNames(styles.templates, contentStyle.card)}>
      <div className={styles.title} style={{ marginBottom: "20px" }}>
        选择模板
      </div>
      <div className={styles.scrollWraper}>
        {state.templates.map((item) => {
          return (
            <div
              key={item.id}
              className={classNames(styles.templateItem)}
              onClick={async () => {
                if (item.id === customization.templateId) return;
                if (customization.id) {
                  const apply = async () => {
                    const res = await updateTemplate(item.id);
                    if (res.code === 200) {
                      updateTemp({
                        ...item.customization,
                        templateId: item.id,
                      });
                    }
                  };
                  Confirm({
                    content: "确认使用该模板？",
                    onOk: async () => {
                      await apply();
                    },
                  });
                } else {
                  updateTemp({
                    ...item.customization,
                    templateId: item.id,
                  });
                }
              }}
            >
              <img
                loading="lazy"
                src={`${item.templateUrl}?imageView2/2/w/700`}
                alt=""
              />
            </div>
          );
        })}
      </div>
    </div>
  );
}
const Index: FC<IndexProps> = ({ hasNoTemp }) => {
  return (
    <div className={styles.customization}>
      {!hasNoTemp ? <Templates /> : null}
      <Layout />
      <Header />
      <Spacing />
      <Colors />
      {/* <Module /> */}
    </div>
  );
};

export default memo(Index);
